<!--  -->
<template>
    <div id="quote-list-container">
        <n-flex justify="space-between" class="mb-6">
            <n-flex>
                <span class="ml-2 text-5">题字墙</span>
                <sup>你的光 也会照亮别人的路 题字成为壁纸题材</sup>
            </n-flex>
            <n-button @click="handleAddQuote">我题</n-button>
        </n-flex>
        <n-grid :cols="1" :y-gap="18">
            <n-gi v-for="it in quoteList" :key="it.id">
                <n-card>
                    <template #header>
                        <n-badge :value="it.likeCount">
                            <span>{{ it.quote }}</span>
                        </n-badge>
                    </template>
                    <template #footer>
                        <n-flex justify="space-between">
                            <n-button text @click="handleClickQuote(it)">{{
                                it.createdBy
                            }}</n-button>
                            <span>{{ it.createdAt }}</span>
                        </n-flex>
                    </template>
                </n-card>
            </n-gi>
        </n-grid>
    </div>

    <n-modal v-model:show="showAddQuote" preset="card" :mask-closable="true" style="width: 800px">
        <template #header>
            <span v-if="curQuote.id">
                <span>修改</span>
                <span>题字</span>
            </span>
            <span v-else>
                <span>{{ curQuote.createdBy }}</span>
                <span>题字</span>
            </span>
        </template>
        <n-form>
            <n-form-item label="题字" path="quote" required>
                <n-input v-model:value="curQuote.quote" placeholder="请输入题字" />
            </n-form-item>
            <n-form-item label="落款" path="createdBy">
                <n-input v-model:value="curQuote.createdBy" placeholder="请输入作者" />
            </n-form-item>
        </n-form>
        <template #action>
            <n-flex justify="end">
                <n-button @click="updQuote" v-if="curQuote.id">修改</n-button>
                <n-button @click="beforeAddQuote" v-else>提交</n-button>
            </n-flex>
        </template>
    </n-modal>
</template>

<script lang="ts" setup>
// MARK: import
import { zoic_GetQuotes_NoToken, zoic_AddQuote_NoToken, zoic_UpdQuote_NoToken } from '@/api';
import { onMounted, ref } from 'vue';

// MARK: emit
// const emit = defineEmits([]);

// MARK: props
// const props=defineProps({});

// MARK:interface

// MARK: params
const curQuote = ref({
    quote: '',
    createdBy: '佚名',
} as Quote);
const showAddQuote = ref(false);
const loading = ref(false);
const quoteList = ref([] as Quote[]);

// MARK: computed

// MARK: watch

// MARK: func
/** @description  */
const handleAddQuote = () => {
    curQuote.value = {
        quote: '',
        createdBy: '佚名',
    } as Quote;
    showAddQuote.value = true;
};

/** @description 处理点击 */
const handleClickQuote = (it: Quote) => {
    curQuote.value = it;
    showAddQuote.value = true;
};

/** @description 新增 */
const beforeAddQuote = () => {
    if (!curQuote.value.quote) {
        window.$message.error('阁下为何一言不发？');
        return;
    }
    if (!curQuote.value.createdBy) {
        curQuote.value.createdBy = curQuote.value.createdBy?.trim() || '佚名';
    }

    if (curQuote.value.createdBy === '佚名') {
        window.$message.info('只好为您落款佚名～');
    }

    window.$dialog.warning({
        title: '即将装裱',
        content: `将会在题字墙中展示 并且允许别人用做壁纸 收藏展示
阁下确定要提交吗`,
        positiveText: '确认',
        negativeText: '取消',
        onPositiveClick: () => {
            addQuote();
        },
    });
};

/** @description  */
const updQuote = async () => {
    loading.value = true;
    try {
        await zoic_UpdQuote_NoToken(curQuote.value);
        window.$message.success('修改成功');
        showAddQuote.value = false;
        // 刷新
        quoteList.value = await zoic_GetQuotes_NoToken();
    } catch (err: unknown) {
        if (err instanceof Error) {
            window.$message.error(err.message);
        }
    } finally {
        loading.value = false;
    }
};

/** @description  */
const addQuote = async () => {
    loading.value = true;
    try {
        const params = {
            quote: curQuote.value.quote,
            createdBy: curQuote.value.createdBy,
        };
        console.log(params);
        await zoic_AddQuote_NoToken(params);
        window.$message.success('题字成功');
        showAddQuote.value = false;
        // 刷新
        quoteList.value = await zoic_GetQuotes_NoToken();
    } catch (err: unknown) {
        if (err instanceof Error) {
            window.$notification.error({
                title: '题字失败',
                content: err.message,
            });
        }
    } finally {
        loading.value = false;
    }
};

// MARK: expose
defineExpose({});

// MARK: hooks
onMounted(async () => {
    loading.value = true;
    try {
        quoteList.value = await zoic_GetQuotes_NoToken();
    } catch (err: unknown) {
        if (err instanceof Error) {
            window.$message.error(err.message);
        }
    } finally {
        loading.value = false;
    }
});
</script>

<style lang="scss" scoped>
#quote-list-container {
    padding: 28px;
    overflow-y: auto;
    height: 100vh;
}
</style>
